<template>
	<tn-popup v-model="show" mode="bottom" :closeBtn="true" :borderRadius="20" @close="closeShow">
		<view class="content">
			<view class="popup_title">最近购买</view>
			<view>
			    <scroll-view scroll-y="true" style="height: 60vh;">
			      <view class="recently_box">
			        <view class="recently_list" v-for="(item, index) in list" :key="item.id" @click="handleList(item.id)">
						<u-radio-group v-model="radio" placement="column" activeColor="#FE0000" @change="groupChange">
							<u-row justify="space-between" gutter="10">
								<u-col span="3.5">
									<image :src="item.commodityImg" style="width: 90px;height: 90px;"></image>
								</u-col>
								<u-col span="8.5">
									<view class="commodity_title">
										{{item.title}}
									</view>
									<view class="commodity_price">
										￥<span class="commodity_price_num">339</span>
										<view style="float: right;">
											<u-radio :name="item.id"></u-radio>
										</view>
									</view>
								</u-col>
							</u-row>
						</u-radio-group>
					</view>
			      </view>
			    </scroll-view>
			    <view class="confrim-btn recently_btn">
			      <tn-button @click="closeShow" width="100%" height="45px" backgroundColor="#FE0000" fontColor="#FFFFFF">确定</tn-button>
			    </view>
			  </view>
		</view>
	</tn-popup>
</template>

<script>
export default {
	props: {
		isShow: {
			type: Boolean
		},
	},
	watch: {
		isShow(newData, oldData) {
			this.show = newData
		}
	},
	data() {
		return {
			show: false,
			radio: null,
			list: [
				{
					id: 0,
					commodityImg: 'https://img.zcool.cn/community/0164295ecfd17ea801215aa096b87c.jpg@2o.jpg',
					title: '佐赫ZH100佐赫ZH100奶牛牧场机械键盘有线无线客有线无线客有线无线客有线无线客有线无线客',
					price: 399,
				},
				{
					id: 2,
					commodityImg: 'https://img.zcool.cn/community/0164295ecfd17ea801215aa096b87c.jpg@2o.jpg',
					title: '佐赫ZH100佐赫ZH100奶牛牧场机械键盘有线无线客有线无线客有线无线客有线无线客有线无线客',
					price: 399,
				},
			]
		}
	},
	methods: {
		closeShow() {
			this.$emit('close')
		},
		groupChange(e) {
			console.log(e)
		},
		handleList(id) {
			this.radio = id
		}
	}
}
</script>

<style scoped>
.popup_title {
	color: #1A1A1A;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 17px;
}
.recently_box {
	padding: 0 10px;
}
.content {
	background-color: #F4F4F4;
}
.recently_list {
	width: 100%;
	background-color: #FFFFFF;
	padding: 12px 10px;
	border-radius: 6px;
	margin-top: 12px;
}
.commodity_title {
	width: 100%;
	/* margin-top: -45px; */
	overflow:hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}
.commodity_price {
	margin-top: 30px;
	font-weight: bold;
}
.commodity_price_num {
	font-size: 20px;
}
.recently_btn {
	background-color: #FFFFFF;
	padding: 9px 16px;
}
</style>
